<template>
  <!-- 主页型页面 -->
  <v-container>
    <!-- 标题栏 -->
    <v-app-bar app>
      <v-toolbar-title style="width:40%">
        <v-img :src="require('@/assets/img/logo2.png')"
               contain
               style="width: 80%" />
      </v-toolbar-title>
      <v-toolbar-title class="title text-center"
                       style="width:20%">{{$route.name}}</v-toolbar-title>
      <v-spacer />
      <v-toolbar-title class="body-2">
        logout
        <v-btn icon
               @click="logout">
          <v-icon>fa-sign-out</v-icon>
        </v-btn>
      </v-toolbar-title>
    </v-app-bar>
    <!-- 主体 -->

    <v-row>
      <v-col cols="12">
        <page-home-staff-info></page-home-staff-info>
      </v-col>
      <v-col cols="12"
             v-for="(menu,index) in staffMenu"
             :key="index">
        <page-home-menu-list :title="menu.title"
                             :menu-data="menu.menuData"></page-home-menu-list>
      </v-col>
    </v-row>

    <!-- 页脚 -->
    <v-bottom-navigation app
                         shift
                         :value="$route.path"
                         @change="routerPush">
      <v-btn value="/">
        <span>主页</span>
        <v-icon>fa-home</v-icon>
      </v-btn>
      <v-btn value="/p001/qr-code">
        <span>二维码</span>
        <v-icon>fa-qrcode</v-icon>
      </v-btn>
      <v-btn value="/p001/message">
        <span>消息</span>
        <v-icon>fa-comment</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-container>
</template>

<script>
import PageHomeMenuList from './PageHomeMenuList.vue';
import PageHomeStaffInfo from './PageHomeStaffInfo.vue';

export default {
  components: { PageHomeMenuList, PageHomeStaffInfo },
  data() {
    return {
      // 菜单数据
      staffMenu: [
        {
          title: '客户交易',
          menuData: [
            {
              title: '开卡',
              icon: 'fa-user',
              color: 'blue',
              path: '/service/open-account',
            },
            {
              title: '信息更新',
              icon: 'fa-edit',
              color: 'amber',
              path: '/service/customer-information-update',
            },
            {
              title: '转账',
              icon: 'fa-money',
              color: 'green',
              path: '/service/time-deposit',
            },
          ],
        },
        {
          title: '网点信息',
          menuData: [
            {
              title: '柜员管理',
              icon: 'fa-users',
              color: 'brown',
            },
            {
              title: '认证列表',
              icon: 'fa-clipboard',
              color: 'purple',
              path: '/p003/authorization-list',
            },
            {
              title: '设备列表',
              icon: 'fa-desktop',
              color: 'blue',
              path: '/p003/device-list',
            },
          ],
        },
        {
          title: '网点信息',
          menuData: [
            {
              title: '柜员管理',
              icon: 'fa-users',
              color: 'brown',
            },
            {
              title: '认证列表',
              icon: 'fa-clipboard',
              color: 'purple',
              path: '/p003/authorization-list',
            },
            {
              title: '设备列表',
              icon: 'fa-desktop',
              color: 'blue',
              path: '/p003/device-list',
            },
          ],
        },
        {
          title: '管理信息',
          menuData: [
            {
              title: '分行管理',
              icon: 'fa-users',
              color: 'green',
            },
            {
              title: '菜单管理',
              icon: 'fa-bars',
              color: 'orange',
            },
            {
              title: '角色管理',
              icon: 'fa-user',
              color: 'blue',
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 登出
    logout() {
      this.$store.commit('LOGOUT');
    },
    // 检查登入
    checkLogin() {
      if (!this.$store.state.termina) {
        // this.$router.push('/p001/login');
      }
      this.$store.commit('CLEAR');
    },
    // 路由跳转
    routerPush(value) {
      this.$router.push(value);
    },
  },
  mounted() {
    this.checkLogin();
  },
};
</script>